<template>
	<view class="user">
		<u-navbar :isBack="false" :border-bottom="false" :background="{ backgroundColor: '#0993EC' }" title-color="#fff" title="吾"></u-navbar>
		
		<view class="first-part">
			<image class="avatar" src="../../static/img/avatar.png" mode="scaleToFill"></image>
			<view class="name">
				<text>{{ userInfo.name }}</text>
				<text>成就：初级</text>
			</view>
			<view class="signin">
				<text class="btn">签到</text>
			</view>
		</view>
		
		<view class="second-part">
			<text>历史记录</text> <text class="line">|</text> <text>收藏</text><text class="line">|</text> <text>学习时长</text>
		</view>
		
		<view class="day-sumup">
			<view class="title">
				功能列表
			</view>
			<u-cell-group>
				<u-cell-item class="item" :border-bottom="false" v-for="i in 8" :key="i" icon="setting-fill" title="个人设置"></u-cell-item>
			</u-cell-group>
		</view>
		<!-- tab -->
		<tab :url="url" index="3"></tab>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: {
					homeURL: '/pages/home/home',
					kldURL: '/pages/kld/kld',
					myURL: '/pages/user/user'
				},
				userInfo: null, // 用户信息 
			};
		},
		onLoad() {
			this.userInfo = this.$store.state.user;
			console.log(this.userInfo, "user");
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	.first-part {
		width: 80%;
		margin: 0 auto;
		margin-top: 40upx;
		display: flex;
		justify-content: space-evenly;
		.avatar {
			width: 168upx;
			height: 168upx;
		}
		.name {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
			margin-left: 20upx;
			font-weight: bold;
			font-size: 36upx;
		}
		.signin {
			text-align: right;
			padding-top: 20upx;
			margin-left: 20upx;
			.btn {
				display: inline-block;
				width: 140upx;
				height: 60upx;
				text-align: center;
				border: 2upx solid #2979FF;
				border-radius: 40upx;
				padding: 10upx 30upx;
			}
		}
	}
	.second-part {
		display: flex;
		justify-content: space-evenly;
		font-size: 32upx;
		margin: 40upx 0;
		.line {
			margin: 0 20upx;
		}
	}

	.day-sumup {
		padding-bottom: 120upx;
		background-color: #fff;
		.title {
			font-size: 36upx;
			font-weight: bold;
			padding: 20upx 0 20upx 20upx;
		}
		.item {
			border-bottom: 1px solid #ccc;
		}
	}
</style>
